<template>
  <div>
    <div v-show="true">
      <el-card>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>订单查询</el-breadcrumb-item>
        </el-breadcrumb>
        <h1>订单查询</h1>
      </el-card>
      <el-card>
        <el-form label-width="80px" size="small" class="top">
          <el-row>
            <el-col :span="11" :offset="1"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 400px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="11"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 400px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="10" :offset="1"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 500px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-row>
                <el-col :span="5">
                  <span>今天</span>
                </el-col>
                <el-col :span="5">
                  <span>明天</span>
                </el-col>
                <el-col :span="5">
                  <span>最近7天</span>
                </el-col>
                <el-col :span="9">
                  <span>最近30天</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11" :offset="1"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 400px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="11"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 400px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="11" :offset="1"
              ><el-form-item label="活动区域">
                <el-select
                  v-model="activeFrom"
                  placeholder="请选择活动区域"
                  style="width: 150px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-input
                  placeholder="请输入内容"
                  style="width: 400px; margin-left: 8px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="8">
              <el-button type="primary" size="small">查看</el-button>
              <el-button size="small">重置</el-button>
              <el-button size="small" style="border: none"
                >收起<i class="el-icon-arrow-up"></i
              ></el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="bottom">
        <div class="bottom-top">
          <p>订单列表</p>
          <el-button>批量操作</el-button>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="first">
            <div class="con-head">
              <div>商品信息</div>
              <div>会员信息</div>
              <div>订单来源</div>
              <div>收货方式</div>
              <div>订单状态</div>
              <div>操作</div>
            </div>
            <div>
              <div class="con-head con-content">
                <div>订单编号：</div>
                <div>下单时间：</div>
                <div>微信支付</div>
                <div>共1件，合计：4000.00元</div>
              </div>
              <div class="con-head con-foot" style="text-align: center">
                <div>
                  <p><img src="../../assets/logo.png" alt="" /></p>
                  <ul>
                    <li>ksdfjlks</li>
                    <li>ksdfjlks</li>
                  </ul>
                </div>
                <div>
                  <p><img src="../../assets/logo.png" alt="" /></p>
                  <ul>
                    <li>ksdfjlks</li>
                    <li>ksdfjlks</li>
                  </ul>
                </div>
                <div><span>微信商城</span></div>
                <div><span>物流快递</span></div>
                <div><span>待收货</span></div>
                <div class="operation">
                  <span  @click="dialogVisible = true">去发货</span>
                  <!-- <span>订单详细</span> -->
                  <router-link to="/home/orderDetails" tag="span"
                    >订单详细</router-link
                  >
                  <!-- <span>复制订单</span> -->
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="second">待付款</el-tab-pane>
          <el-tab-pane label="待收货" name="third">待收货</el-tab-pane>
          <el-tab-pane label="已发货" name="fourth">已发货</el-tab-pane>
          <el-tab-pane label="已完成" name="five">已完成</el-tab-pane>
          <el-tab-pane label="已关闭" name="fix">已关闭</el-tab-pane>
          <el-tab-pane label="售后中" name="eight">售后中</el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      activeFrom: "",
      activeName: "first",
      isShow: true,
      
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped lang="less">
.el-card:last-child {
  margin-top: 20px;
}
.top > .el-row > .el-col > .el-row {
  .el-col {
    text-align: center;
    height: 51px;
    line-height: 33px;
  }
}
.bottom {
  .bottom-top {
    display: flex;
    justify-content: space-between;
  }
  .con-head {
    display: flex;
    justify-content: start;
    text-align: center;
    div {
      width: 20%;
      height: 60px;
      background: #eee;
      line-height: 60px;
      padding-left: 8px;
    }
  }
  .con-content {
    margin-top: 20px;
    div {
      width: 25%;
    }
  }
  .con-foot {
    p {
      height: 60px;
      line-height: 60px;
    }
    display: flex;
    text-align: center;
    > div {
      display: flex;
    }
    img {
      width: 40px;
      height: 40px;
      margin-top: 10px;
      margin-left: 50px;
    }
    li {
      width: 90px;
      height: 30px;
      line-height: 30px;
      list-style: none;
    }
    div {
      background: #fff;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
    .operation {
      color: blue;
      cursor: pointer;
      text-align: center;
      span {
        padding-right: 25px;
      }
    }
  }
}
</style>